<template>
  <div class="viewBox">
    <div class="view_title">
      <div class="text-16px">待办事宜</div>
      <div
        class="flex items-center cursor-pointer"
        @click="gotoPage('/rsgl/other/agent')"
      >
        <el-button link type="primary"> 全部 </el-button>
        <img class="w-15px h-15px ml-2px" src="@/assets/images/00.png" alt="" />
      </div>
      <!-- <el-button link type="primary" color="rgb(0,0,0)" @click="delThis">
        删除<el-icon><Delete /></el-icon>
      </el-button> -->
    </div>
    <div>
      <el-table
        border
        v-loading="loading"
        :data="tableList"
        @row-dblclick="rowClick"
        style="margin-top: 16px; width: 100%; margin-bottom: 20px"
        class="cursorTable"
        header-row-class-name="textCenter"
      >
        <el-table-column label="标题" align="left" prop="title">
          <template #default="scope">
            <div class="truncate">
              <div>
                <span class="read_icon">
                  <img
                    v-if="scope.row.readFlag == 'Y'"
                    src="@/assets/images/icon/read.png"
                  />
                  <img v-else src="@/assets/images/icon/unread.png" />
                </span>

                <span class="urg_icon">
                  <img
                    v-if="scope.row.impSign == '0' || scope.row.impSign == '1'"
                    src="@/assets/images/icon/ban.png"
                  />
                  <img
                    v-else-if="scope.row.impSign == '2'"
                    src="@/assets/images/icon/yue.png"
                  />
                </span>
              </div>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.title"
                placement="top-start"
                trigger="hover"
              >
                {{ scope.row.title }}
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="发送时间"
          align="center"
          prop="sendTime"
          width="180"
        >
        </el-table-column>
        <el-table-column
          label="发送人"
          prop="sender"
          align="center"
          width="100"
        />
      </el-table>
    </div>
  </div>
  <detailForm
    v-if="isDetail"
    :rowId="rowId"
    :titleMessage="titleMessage"
    @closeDialog="closeDialog"
  ></detailForm>
</template>

<script setup name="ToDoList">
import {
  getTodoMessageList,
  getTodoMessageRead
} from '@/api/businessSettings/agent'
import { useRouter } from 'vue-router'
import detailForm from '../detail.vue'
const router = useRouter()
const loading = ref(false)
const timer = ref(null)
onMounted(() => {
  console.log('待办事宜 onmounted')
  timer.value = setInterval(() => {
    getList()
  }, 60000)
})
onBeforeUnmount(() => {
  console.log('待办事宜 unmount')
  clearInterval(timer.value)
})
const data = reactive({
  tableList: [],
  queryParams: {
    pageNum: 1,
    pageSize: 8,
    handleFlag: '0'
  }
})

const { tableList, queryParams } = toRefs(data)

async function init() {
  loading.value = true
  await getList()
}

function getList() {
  getTodoMessageList({
    ...queryParams.value
  }).then(res => {
    if (res.code == 200) {
      loading.value = false
      tableList.value = res.rows
    }
  })
}

const ids = ref([])
const isDetail = ref(false)
const rowId = ref('')
const titleMessage = ref('')
// 模块跳转
function rowClick(row) {
  if (row.type == 1) {
    let str = row.url.split('?')
    let urlName = []
    urlName = str[1] ? str[1].split('&') : ''
    let urlLink = {}
    for (var i = 0; i < urlName.length; i++) {
      urlLink[urlName[i].split('=')[0]] = urlName[i].split('=')[1]
    }
    router.push({
      path: `/${str[0]}/`,
      query: urlLink
    })

    ids.value.push(row.id)
    getTodoMessageRead({ ids: ids.value }).then(res => {
      console.log('res', res)
    })
  } else {
    isDetail.value = true
    rowId.value = row.id
    titleMessage.value = row.titleMessage
  }
}
// 页面跳转
function gotoPage(path, query) {
  router.push({
    path,
    query
  })
}
// 弹窗关闭
function closeDialog() {
  isDetail.value = false
  getList()
}

const emit = defineEmits(['delComponent'])
const porps = defineProps({
  index: {
    type: Number
  }
})

init()
</script>

<style scoped lang="scss">
.viewBox {
  height: 420px;
  margin-bottom: 20px;
  :deep(.el-table) {
    margin: 0 !important;
  }
  .read_icon {
    width: 24px;
    height: 23px;
    float: left;
    img {
      vertical-align: center;
      width: 24px;
      height: 18px;
    }
  }
  .urg_icon {
    float: left;
    margin: 0 6px;
    height: 23px;
    img {
      vertical-align: center;
      width: 18px;
      height: 16px;
      margin-top: 2px;
    }
  }
  .view_title {
    background-color: rgba(249, 249, 249, 1);
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid rgba(223, 220, 220, 0.8);
    border-bottom: none;
    font-family: '微软雅黑 Bold';
    font-weight: 600;
    // box-shadow: 0px 1px 3px 1px rgb(201, 197, 197);
  }
  :deep(.cursorTable tbody .el-table__row) {
    cursor: pointer;
  }
  :deep(.textCenter .el-table__cell) {
    text-align: center;
  }
}
</style>
